<template>
  <div class="followRecords">
    <div class="header">
      <div>跟进记录</div>
      <div class="activity">
        <template v-for="(activity,index) in view.activities">
          <div
            :key="index"
            :title="activity.name"
            @click="onAction(activity)"
          >
            <span :class="['act-btns','act-btns-' + activity.type]">{{activity.name}}</span>
          </div>
        </template>
      </div>
    </div>
    <div class="searchBox">
      <form_searchform :viewId="viewId" @onSearch="onSearch" ref="searchBox"></form_searchform>
    </div>
    <div class="contain">
      <div class="records">
        <!-- <div class="num">总计数量:{{row_count}}条</div> -->
        <div :style="{'height':containHeight,'overflow':'auto'}">
          <div v-for="(item,index) in tableData" :key="index" @click="onRowClick(item,index)" :class="['records_once',currentIndex == index ? 'selectRecord' : '']">
            <div class="information">
              <div class="customer">
                <div class="acatar"><el-avatar>{{item.items['__9VNOVOAGtyYM7G0kFFR'].value.substring(item.items['__9VNOVOAGtyYM7G0kFFR'].value.length-2,item.items['__9VNOVOAGtyYM7G0kFFR'].value.length)}}</el-avatar></div>
                <div class="user">
                  <span class="boldColor">{{item.items['__9VNOVOAGtyYM7G0kFFR'].value}}</span><span class="commonColor">  &nbsp;{{item.items['__rgm9iq4BG0TMRHn94rA'].value}} </span>
                  <br>
                  <span class="commonColor">{{item.items['__ZOzHZ75eKr1wAIr3QOF'].value}} &nbsp;| &nbsp;{{item.items['__kKaMbaoJSC3hgP7uQm5'].value}}</span>
                </div>
              </div>
              <!-- <div class="actBtn commonColor">currentPagev
                <span>回复</span>&nbsp;  | &nbsp;<span @click.stop="toUpvote(item)">点赞</span>
              </div> -->
            </div>
            <div class="boldColor">{{item.items['__L9cl0nzqjPiBGcpaHsj'].value}}</div>
            <div><span class="commonColor">跟进业务：</span><span>{{item.items['__nnIGIAOWrJjoj91qFKm'].value}}</span></div>
          </div>
        </div>
        <div class="page">
          <el-pagination
            background
            small
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="row_count">
          </el-pagination>
        </div>
      </div>
      <div class="records_detail" v-if="Object.keys(rowData).length > 0" :style="{'height':containHeight,'overflow':'auto'}">
        <div class="records_top">
          <div class="records_customer">
            <div class="avatar">
              <el-avatar>{{rowData.items['__9VNOVOAGtyYM7G0kFFR'].value.substring(rowData.items['__9VNOVOAGtyYM7G0kFFR'].value.length-2,rowData.items['__9VNOVOAGtyYM7G0kFFR'].value.length)}}</el-avatar>
            </div>
            <div class="detail">
              <div><span class="boldColor">{{rowData.items['__9VNOVOAGtyYM7G0kFFR'].value}}</span><span class="commonColor">  &nbsp;{{rowData.items['__rgm9iq4BG0TMRHn94rA'].value}} </span></div>
              <div><span class="commonColor">{{rowData.items['__ZOzHZ75eKr1wAIr3QOF'].value}} &nbsp;| &nbsp;{{rowData.items['__kKaMbaoJSC3hgP7uQm5'].value}}</span></div>
              <div class="boldColor">{{rowData.items['__L9cl0nzqjPiBGcpaHsj'].value}}</div>
              <div><span>联系人：</span><span>{{rowData.items['__9VNOVOAGtyYM7G0kFFR'].value}}</span></div>
              <div><span class="commonColor">跟进业务：</span><span>{{rowData.items['__nnIGIAOWrJjoj91qFKm'].value}}</span></div>
            </div>
          </div>
          <div class="records_reply">
            <comment :docId="rowData.id"></comment>
          </div>
        </div>
        <div class="records_tabs">
          <el-tabs v-model="activeName" class="tabs">
            <el-tab-pane label="基本信息" name="first">
              <div class="basicAndDynamics">
                <div class="basicInfo">
                  <template v-for="(item,index) in formdata.fields">
                    <template v-if="item.formField == 'UserField'">
                      <div class="left" :key="index">{{item.discript}}： {{showName(item.value,item.data)}}</div>
                    </template>
                    <template v-else-if="item.formField == 'SelectField'">
                      <div class="left" :key="index">{{item.discript}}： {{showOption(item.value,item.options)}}</div>
                    </template>
                    <template v-else-if="item.formField == 'ImageUploadField'">
                      <div :key="index" class="left">{{item.discript}}：
                        <span class="right" v-if="item.value" >
                          <template v-for="(el,inx) in JSON.parse(item.value)">
                            <img :src="el.url" alt="" :key="inx">
                          </template>
                        </span>
                      </div>
                    </template>
                    <template v-else-if="item.formField == 'AttachmentUploadField'">
                      <div :key="index" class="left">{{item.discript}}：
                        <span class="right" v-if="item.value" :key="index">
                          <template v-for="(el,inx) in JSON.parse(item.value)">
                            <div :key="inx" @click="handlePreview(el)" class="fileBox">{{el.name}}</div>
                          </template>
                        </span>
                      </div>
                    </template>
                    <template v-else-if="item.formField != 'CalctextField' && item.formField != 'ViewDialogField' && item.formField != 'IncludeField'">
                       <div class="left" :key="index">{{item.discript}}： {{item.value}}</div>
                    </template>
                  </template>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getViewTemplate,
  getViewData,
  upvote,
  getForm,
  batchRemoveDocuments,
} from "@/api.js"
import form_searchform from "@/components/form_searchform.vue"
import comment from "@/components/comment.vue"
export default {
  props:[],
  components: {
    form_searchform,
    comment
  },
  data() {
    return {
      customerName:'',
      activeName:'first',
      viewId: '',
      row_count:0,
      currentPage:1,
      pageSize:10,
      tableData:[],
      rowData:{},
      view: {},
      formdata: {}, //表单数据
      currentIndex:0,
      currentDocId:'',
      containHeight:''
    }
  },
  created() {
    let queryData = this.$route.query
    this.viewId = queryData.viewid ? queryData.viewid : queryData.viewId ? queryData.viewId :'',
    this.toGetViewTemplate()
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        let searchHeight = document.getElementsByClassName('searchBox')[0].clientHeight
        let bodyHeight = document.body.clientHeight
        let containHeight = bodyHeight - searchHeight - 45 - 5 - 10 - 10 - 26 + 'px'
        this.containHeight = containHeight
      },100)
    })
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      this.getData()
    },
    doRemove(act) {
      let docIds = []
      docIds.push(this.currentDocId)
      if(docIds && docIds.length > 0) {
        this.$confirm('是否需删除当前选中的数据', '提示', {
          confirmButtonText: '确定',
          cancelButtonText:'取消',
          type: 'warning'
        }).then(() => {
          this.removeDocuments(act,docIds)
        }).catch(() => {
                  
        });
      }else {
        this.$confirm('请选择至少一条数据', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          
        }).catch(() => {
                  
        });
      }
    },
    //删除视图
    removeDocuments(act,docIds) {
      batchRemoveDocuments(docIds, {
        onSucess: (res) => {
          if(res.data.errcode == 0) {
            this.$notify({
              title:'成功',
              message:'',
              type: 'success'
            })
            this.getData()
          }
        }
      });
    },
  //显示用户名
    showName(value,data) {
      if(value) {
        for(let i = 0; i < data.length; i ++) {
          if(data[i].id == value) {
            return data[i].name
          }
        }

      }else {
        return ''
      }

    },
    showOption(value,options) {
      if(value) {
        for(let i = 0; i < options.length; i ++) {
          if(options[i].value == value) {
            return options[i].option
          }
        }

      }else {
        return ''
      }
    },
    onAction(act) {
      switch (act.type) {
        case 2: //新建
        {
          console.log('点击了')
          let params = {
            appId:obpmConfig.appId,
            actionContent: act.onActionForm,
            name: this.view.name,
            linkType:'00',
          }
          top.obpmOAction('open-eject',params)
          break;
        }
        case 3: //删除
          this.doRemove(act)
          break;
        case 27: //导入
          break;
        case 16: //导出
        {
          let params = {
            appId:obpmConfig.appId,
            exportDialog:true,
            copyColumns:this.view.columns,
            currentClickBtnAct:act,
            currentDocIds:[],
            view:this.view,
            showtype:''
          }
          top.obpmOAction('excellExport',params)
          break;
        }
        default:
          break;
      }
    },
    //点赞
    toUpvote(item) {
      upvote(
        item.id,
        {
          onSucess: response => {
            this.$notify({
              title: '点赞成功！',
              message: '',
              type: 'success'
            });
            // if(response.data.errcode == 200) {
            //   this.$notify({
            //     title: '点赞成功！',
            //     message: '',
            //     type: 'success'
            //   });
            // }
          }
        }
      )
    },
    onRowClick(row,index) {
      debugger
      this.currentDocId = row.id
      this.currentIndex = index
      this.rowData = row
      let formId = ''
      if(this.view.templateForm) {
        formId = this.view.templateForm
      }else {
        formId = row.formId
      }
      let docId = row.id
      let appId = obpmConfig.appId
      let obj = {
        _: new Date().getTime(),
      };
      getForm(
        appId,
        formId,
        docId,
        obj,
        {
          onSucess: response => {
            let fd = response.data.data
            this.formdata = fd
            console.log(fd,'fd')
          }
        }
      )
    },
    onSearch(searchData) {
      let page = 1;
      let size = 9999
      this.getData(page, size, searchData);
    },
    toGetViewTemplate() {
      getViewTemplate(
        this.viewId,
        {
          onSucess: response => {
            if(response.data.data) {
              let viewData = response.data.data;
              this.view = viewData
              this.getData()
            }
          }
        }
      )
    },
    getData(page,size,searchData) {
      let params = {
        parentId: '',
        isRelate: '',
        currpage: this.currentPage,
        lines: this.pageSize,
        searchWord: "",
        treedocid: '',
        sortCol: '',
        sortStatus: '',
      }
      getViewData(
        this.viewId,
        params,
        searchData ? searchData : {},
        {
          onSucess: response => {
            if(response.data.data) {
              this.tableData = response.data.data.data
              this.row_count = response.data.data.row_count
              this.onRowClick(this.tableData[0],0)
            }
          }
        }
      )
    }
  }
}
</script>

<style>
@import "../assets/style/followRecords.scss";
</style>